<template>
    <div class="container">
        <div class="row">
            <div class="col-8">
                <h6><b class="square"></b> 来自
                  <a :href="'/profile/' + (ifshow ?content.map.target.id:'')" class="text-success">{{ifshow ? content.map.target.name : ''}}</a>
                  的私信
                </h6>
            </div>
            <div class="col-4 text-right">
                <button type="button" class="btn btn-secondary btn-sm" onclick="location.href='/letter';">返回</button>
                <button type="button" class="btn btn-primary btn-sm" data-toggle="modal" data-target="#sendModal">给TA私信</button>
            </div>
        </div>
        <!-- 弹出框 -->
        <div class="modal fade" id="sendModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-lg" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="exampleModalLabel">发私信</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <form>
                            <div class="form-group">
                                <label for="recipient-name" class="col-form-label">发给：</label>
                                <input disabled type="text" class="form-control" id="recipient-name" :value="ifshow ? content.map.target.name : ''">
                            </div>
                            <div class="form-group">
                                <label for="message-text" class="col-form-label">内容：</label>
                                <textarea v-model="toContent" class="form-control" id="message-text" rows="10"></textarea>
                            </div>
                        </form>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                        <button type="button" @click="send()" class="btn btn-primary" id="sendBtn">发送</button>
                    </div>
                </div>
            </div>
        </div>
        <!-- 提示框 -->
        <div class="modal fade" id="hintModal" tabindex="-1" role="dialog" aria-labelledby="hintModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-lg" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="hintModalLabel">提示</h5>
                    </div>
                    <div class="modal-body" id="hintBody">
                        发送完毕!
                    </div>
                </div>
            </div>
        </div>						
        
        <!-- 私信列表 -->
        <ul class="list-unstyled mt-4">
            <li class="media pb-3 pt-3 mb-2" v-for="(item,i) in (ifshow ? content.map.letters : [])">
                <a :href="'/profile/' + item.fromUser.id">
                    <img :src="item.fromUser.photo" class="mr-4 rounded-circle user-header" alt="用户头像" >
                </a>
                <div class="toast show d-lg-block" role="alert" aria-live="assertive" aria-atomic="true">
                    <div class="toast-header">
                        <strong class="mr-auto">{{item.fromUser.name}}</strong>
                        <small>{{item.letter.createTime | datatime}}</small>
<!--                        <button @click = 'delete_msg(item.letter.id)' id="close" type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
                          <span aria-hidden="true">&times;</span>
                        </button>-->
                    </div>
                    <div class="toast-body">
                        {{item.letter.content}}
                    </div>
                </div>
            </li>																																																									
        </ul>
        <!-- 分页 -->
        <pagination ref="pagination" v-bind:list="getlist" v-bind:itemCount="8"></pagination>
    </div>
</template>
<script>
import Pagination from "@/components/pagination";
export default {
    name:'letterdetail',
    data(){
        return{
            content:null,
            conversationId:null,
            ifshow:false,
            toContent:'', //私信内容
        }
    },  
    watch:{
        content(){
            this.setIfshow();
        }
    },
    components: {Pagination},
    created(){
        this.setIfshow()
        this.conversationId = this.$route.params.conversationId
    },
  mounted(){
    this.getlist(1);
  },
    methods:{
        //获取私信详情数据
        getlist(page){
            let _this = this;
            _this.$ajax.post(process.env.VUE_APP_SERVER + '/business/web/letter/detail/'+_this.conversationId, {
                page: page,
                size: this.$refs.pagination.size,
            }).then((response)=>{
                console.log("查询私信详情结果：", response);
                _this.content = response.data.content;
                _this.$refs.pagination.render(page, response.data.content.total);

            })
        },
        //判断对象是有值
        setIfshow(){
            if(this.content != null){
                this.ifshow = true;
            }else{
                this.ifshow = false;
            }
        },

      // delete_msg(){
      //   let _this = this;
      //   _this.$ajax.post('http://127.0.0.1:9000/business/letter/delete',{
      //     id:1
      //   },{
      //     headers:{
      //       'Content-type': 'application/x-www-form-urlencoded'
      //     }
      //   }).then((response)=>{
      //     console.log("查询帖子详情结果：", response);
      //     _this.content = response.data.content;
      //     _this.$refs.pagination.render(page, response.data.content.total);
      //
      //   })
      // }
       delete_msg(id) {
          // var btn = this;
          // var id = $(btn).prev().val();
          $.post(
              process.env.VUE_APP_SERVER + "/business/web/letter/delete",
              {"id":id},
              function(data) {
                console.log(data)
                data = $.parseJSON(data);
                if(data.success) {
                  $("#close").parents(".media").remove();
                }
              }
          );
        },
      //发送私信
      send(){
        let _this = this;
        this.$ajax.post(process.env.VUE_APP_SERVER + '/business/web/letter/send', {
          toName: _this.content.map.target.mobile,
          content: _this.toContent,
        }).then((response)=>{
          if(response.data.success) {
            $("#sendModal").modal("hide");
            _this.toContent="";
            Toast.success("发送私信成功。");
            _this.getlist(1);
          }else{
            Toast.error("发送私信失败。");
          }
        })
      }
    }
}
</script>

<style lang="scss" scoped>
    @import '@/assets/style/css/global.scss';
    @import '@/assets/style/css/letter.scss';
</style>